import { PureComponent } from 'react'
import {marked} from 'marked'
import ArticleHeader from './ArticleHeader'
import CommentContainer from './Comments'

const article = {
    "slug": "1371cdf8",
    "title": "你好react",
    "description": "hello desc",
    "body": "# hello  ```js```",
    "createdAt": "2022-01-20T05:28:57.000Z",
    "updatedAt": "2022-01-20T05:28:57.000Z",
    "userEmail": "lisi@qq.com",
    "tags": [
        "html",
        "tag1"
    ],
    "author": {
        "username": "lisi",
        "avatar": null,
        "bio": null,
        "createdAt": "2022-01-12T10:08:43.000Z",
        "updatedAt": "2022-01-12T10:08:43.000Z"
    }
}

const comments = [
    {
        "id": 4,
        "body": "comment body 2 ",
        "createdAt": "2022-01-22T11:14:58.000Z",
        "updatedAt": "2022-01-22T11:14:58.000Z",
        "userEmail": "zhangsan@qq.com",
        "articleSlug": "39dad7ae",
        "user": {
            "username": "zhangsan",
            "bio": null,
            "avatar": null
        }
    },
    {
        "id": 5,
        "body": "comment body 3 ",
        "createdAt": "2022-01-22T11:15:02.000Z",
        "updatedAt": "2022-01-22T11:15:02.000Z",
        "userEmail": "zhangsan@qq.com",
        "articleSlug": "39dad7ae",
        "user": {
            "username": "zhangsan",
            "bio": null,
            "avatar": null
        }
    }
]

const currentUser = {
    username: 'zhangsan',
    avatar: 'https://gu0nuli.github.io/reactStatic/react_static/v1_111.jpg',
    bio: 'user'
}

class Article extends PureComponent {
    constructor(props){
        super(props)
        this.state={
            slug:props.match.params.slug
        }
    }
    componentDidMount(){

    }

    render() {
        // const {article,comments,currentUser} =this.props
        if(!article){
            return null
        }
        const markdata = article.body
        const markhtml = marked.parse(markdata)
        const markobj = {__html:markhtml}

        const isOwn = currentUser&&currentUser.username === article.author.username
        
        return (
            <div className='article-pag'>
                {/* 头部--标题*/}
                <div className='banner'>
                    <div className='container'>
                        <h1>{article.title}</h1>
                        <ArticleHeader article={article} isOwn={isOwn}/>
                    </div>
                </div>

                <div className='container page'>
                    {/* 详情--文章信息-文章评论 */}
                    {/* 文章信息 */}
                    <div className='row article-content'>
                        <div className='col-xs-12'>
                            <div dangerouslySetInnerHTML={markobj}>
                            </div>
                            <ul className='tag-list'>
                                {
                                    article.tags.map((tag)=>{
                                        return(
                                            <li key={tag} className="tag-gt1">
                                                {tag}
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                    {/* 文章评论 */}
                    <CommentContainer currentUser={currentUser} comments={comments}/> 
                </div>
            </div>
        )

    }
}

export default Article;
